<template>
  <div>
    <!-- 自定义指令：
             使用步骤
                全局
                  Vue.directive(指令名,{生命周期})
                局部
                directives:{
                      指令名:{
                        指令的生命周期
                            bind:绑定时（渲染前，类似于beforeMount）
                            inserted:指令所在标签添加到父节点时执行(渲染后，类似于mounted)
                            update:更新时，它是指令所在组件有更新，且不保证更新完成
                            componentUpdated:更新完成后，指令所在组件包括子组件都更新完成，类似(updated)
                            unbind:解绑,指令所在标签的销毁，类似于(destroyed)
                            bind(dom,obj,vnode){
                                dom:指令所在dom
                                obj:{
                                    属性,修饰符,值(value)
                                }
                                vnode:{
                                    context:指令所在组件的实例对象
                                }
                            }
                      }
                v-指令名:属性.修饰符=值
                }
     -->
    <!--
       需求1：有一个图片显示，要通过自定义指令显示它的图片
        img不使用src通过指令渲染图片
      -->
    <button @click="setImg">更改图片url</button>
    <button @click="bol = false">销毁img</button>
    <img v-if="bol" v-showimg="imgUrl" class="img" alt="" />
    <hr />
    <!--  需求2：有一个图片显示，它有src,也可能没有，如果没有加src，就使用一个默认图片
              如果有src了，图片加载出错了，也需要使用默认图片 -->
    <button
      @click="
        xxx =
          'https://img0.baidu.com/it/u=3645224565,1726081860&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200'
      "
    >
      更新xxx到正常值
    </button>
    <img v-setimg="defaultImg" :src="xxx" alt="" />
  </div>
</template>
<script>
export default {
  directives: {
    showimg: {
      inserted (dom, obj) {
        dom.src = obj.value
      },
      componentUpdated (dom, obj) {
        dom.src = obj.value
      },
      unbind () {
        // console.log('unbind')
      }
    },
    setimg: {
      inserted (dom, obj) {
        console.log(obj, dom.src)
        dom.src = dom.src || obj.value
        // 作用：图片img加载出错时会执行
        dom.onerror = () => {
          console.log('加载出错了')
          dom.src = obj.value
        }
      },
      componentUpdated (dom, obj) {
        dom.src = dom.src || obj.value
      }
    }
  },
  data () {
    return {
      bol: true,
      imgUrl:
        'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
      xxx:
        'https://img0.baidu.com/itxxx/u=3645224565,1726081860&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
      //   xxx: null,
      defaultImg:
        'https://img2.baidu.com/it/u=3062813899,1142128231&fm=253&fmt=auto&app=138&f=JPEG?w=479&h=500'
    }
  },
  methods: {
    setImg () {
      this.imgUrl =
        'https://img1.baidu.com/it/u=592570905,1313515675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
    }
  }
}
</script>
<style lang="scss" scoped>
.img {
  width: 300px;
  height: 300px;
}
</style>
